<template>
<Row class="layout-content-body">
  <dtable :columns="columns" :dataAll="dataAll" :dataShow="dataShow" :totals="total" :loading="loading" add delCheck op @refresh="getall()" @add="add" @del="del" @edit="edit" @delCheck="delCheck" @changePage="changePage"></dtable>
  <Modal title="直播频道信息" v-model="editData" width="600" :mask-closable="false" class="editm" @on-ok="asyncOK" @on-cancel="asyncCancel">
    <Form ref="editForm" :model="formItem" :label-width="80" :rules="ruleValidate">
      <Form-item label="频道标题" prop="Title">
        <Input v-model="formItem.Title" placeholder="请输入" @on-enter="asyncOK()"></Input>
      </Form-item>
      <Form-item label="虚拟域名" prop="Vhost">
        <Input v-model="formItem.Vhost" placeholder="请输入"></Input>
      </Form-item>
      <Form-item label="频道标识" prop="Stream">
        <Input v-model="formItem.Stream" placeholder="请输入"></Input>
      </Form-item>
      <Form-item label="是否录制" prop="Type">
        <Radio-group v-model.number="formItem.Type">
          <Radio label="0">不录制</Radio>
          <Radio label="1">录制</Radio>
        </Radio-group>
      </Form-item>
      <Form-item label="状态" prop="Status">
        <Radio-group v-model.number="formItem.Status">
          <Radio label="1">启用</Radio>
          <Radio label="0">停用</Radio>
        </Radio-group>
      </Form-item>
      <Form-item label="发布范围" prop="Scope">
        <Radio-group v-model.number="formItem.Scope">
          <Radio label="2" v-if="getScope">全系统</Radio>
          <Radio label="1">全单位</Radio>
          <Radio label="0">本部门</Radio>
          <Radio label="3">指定用户</Radio>
        </Radio-group>
      </Form-item>
      <Form-item v-if="formItem.Scope==='3' || formItem.Scope===3">
        <Transfer :titles="['未授权', '已授权']" :data="TransData" :target-keys="targetKeys" :render-format="render" @on-change="handleChange"></Transfer>
      </Form-item>
      <Form-item label="说明" prop="Remark">
        <Input v-model="formItem.Remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入...">
        </Input>
      </Form-item>
    </Form>
  </Modal>
</Row>
</template>

<script>
// import api from '../../api'
// import {mapMutations, mapGetters, mapState} from 'vuex'
import {
  timeFormat
} from '@/common/filter'
import dtable from '../../components/table/btable.vue' //采用biztable
import moment from "moment"
export default {
  data() {
    return {
      loading: false, //数据刷新遮罩层
      columns: [

        {
          title: '名称',
          key: 'Title',
          sortable: true
        },
        {
          title: '访问地址',
          key: 'Url',
          sortable: true,
        },
        {
          title: '所属单位',
          key: 'OrgName',
          sortable: true
        },
        {
          title: '是否录制',
          key: 'Type',
          sortable: true,
          render(row, column, index) {
            return `${(row.Type === 0) ? '不录制' : '录制'}`;
          }
        },
        {
          title: '范围',
          key: 'Sname',
          width: 80,
          sortable: true,
        },
        {
          title: '创建者',
          key: 'Creater',
          sortable: true
        },
        {
          title: '发布时间',
          key: 'Ctime',
          sortable: true,
          render: (h, params) => {
            return h('div', [
              h('strong', timeFormat(params.row.Ctime))
            ]);
          }
        },
        {
          title: '最后修改者',
          key: 'Updater',
          sortable: true
        },
        {
          title: '最后修改时间',
          key: 'Utime',
          sortable: true,
          render: (h, params) => {
            return h('div', [
              h('strong', timeFormat(params.row.Ctime))
            ]);
          }
        },
        {
          title: '状态',
          key: 'status',
          width: 80,
          sortable: true,
          render(row, column, index) {
            return `${(row.status === 0) ? '失效' : '有效'}`;
          }
        }
      ], //表格样式
      dataAll: [], //表格数据来源
      dataShow: true, //是否显示表格数据查看表单
      editData: false, //显示编辑表单
      formItem: {
        Title: '',
        Stream: '',
        Scope: 0,
        Type: 0,
        Vhost: 'live',
        Url: '',
        OrgName: '',
        Status: 1,
        Remark: '',
        users: this.targetKeys
      }, //数据编辑表单
      ruleValidate: {
        Title: [{
          required: true,
          message: '标题不能为空',
          trigger: 'blur'
        }],
        Stream: [{
          required: true,
          message: '标识不能为空',
          trigger: 'blur'
        }],
        Vhost: [{
          required: true,
          message: '虚拟域名不能为空',
          trigger: 'blur'
        }],

      }, //数据编辑表单验证规则
      addid: true, //true为修改模式，false为添加模式
      //        role: [],
      org: [],
      total: 0,
      optionsDate: {
        shortcuts: [{
            text: '最近一周',
            value() {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() + 3600 * 1000 * 24 * 7);
              return [start, end];
            }
          },
          {
            text: '最近一个月',
            value() {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() + 3600 * 1000 * 24 * 30);
              return [start, end];
            }
          },
          {
            text: '最近三个月',
            value() {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() + 3600 * 1000 * 24 * 90);
              return [start, end];
            }
          }
        ]
      },
      TransData: [],
      targetKeys: [],
    }
  },
  components: {
    dtable,
  },
  computed: {
    state() {
      return this.$store.state.app
    },
    getRtime() {
      let rtime = []
      rtime.push(this.formItem.Btime, this.formItem.Etime)
      return rtime
    },
    getScope() {
      if (this.state.role.Type > 0) {
        return false
      } else {
        return true
      }
    }
  },
  watch: {},
  methods: {
    //富文本框内容对应
    updateData(data) {
      // sync content to component
      this.formItem.Content = data
    },
    //     获取资源名称
    getNameById(value) {
      let rname = ""
      if (value || '') {
        let rv = this.dataAll.filter((col, index) => col.Id === value)
        rname = rv[0].Name
      }
      return rname
    },
    //      改变页码
    changePage(pagedata) {
      this.spinShow = true
      this.$api.getBulletin(pagedata).then(res => {
        if (!res.error) {
          this.total = res.Data.total
          this.dataAll = res.Data.tabledata

        } else {
          this.$Message.error(res.message)
        }
      })
      setTimeout(() => {
        this.spinShow = false;
      }, 500);
    },
    getall() {
      let pagedata = {
        pagesize: 10,
        page: 1
      }
      this.loading = true
      this.$api.getLiveChannel(pagedata).then(res => {
        if (!res.error) {
          this.total = res.Data.total
          this.dataAll = res.Data.tabledata
        } else {
          this.$Message.error(res.message)
        }
      }, error => {
        this.$Message.error(res.message, 4)
      })
      setTimeout(() => {
        this.loading = false;
      }, 300);
    },
    getUser() {
      this.$api.GetAllOrgUsers().then(res => {
        if (!res.error) {
          this.TransData = res.Data
        } else {
          this.$Message.error(res.message)
        }
      }, err => {
        this.$Message.error(res.message, 4)
      })
    },
    getLiveUser(index) {
      this.$api.GetLiveUserByLive(index).then(res => {
        if (!res.error && res.Data) {
          this.targetKeys = res.Data
        } else {
          this.targetKeys = []
        }
      })
    },
    edit(index) {
      console.log(index)
      this.getLiveUser(index.Id)
      this.addid = true
      this.formItem = index
      //        this.formItem.Rtime = this.getRtime
      this.editData = true
    },
    add() {
      this.targetKeys = []
      this.addid = false
      this.$refs['editForm'].resetFields()
      this.formItem.Rtime = this.getRtime
      this.editData = true
    },
    asyncOK() {
      this.formItem.users = this.targetKeys
      console.log(this.formItem)
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          if (this.addid) {
            this.$api.updateLiveChannel(this.formItem).then(res => {
              if (!res.error) {
                this.getall()
                this.$Message.success(res.message)
              } else {
                this.$Message.error(res.message, 4)
              }
            }, err => {
              this.$Message.error(res.message, 4)
            })
          } else if (!this.addid) {
            this.$api.addLiveChannel(this.formItem).then(res => {
              if (!res.error) {
                this.getall()
                this.$Message.success(res.message)
              } else {
                this.$Message.error(res.message, 4)
              }
            }, err => {
              this.$Message.error(res.message, 4)
            })
          }
          setTimeout(() => {
            this.editData = false;
          }, 1000);
        } else {
          this.$Message.error('表单验证失败!');
        }
      })
      this.editData = false
      this.$refs['editForm'].resetFields()

    },
    asyncCancel() {
      this.getall()
      this.$refs['editForm'].resetFields()
    },
    del(row) {
      this.$api.deleteLiveChannel(row).then(res => {
        if (!res.error) {
          this.getall()
          this.$Message.success(res.message)
        } else {
          this.$Message.error(res.message, 4)
        }
      }, err => {
        this.$Message.error(res.message, 4)
      })
    },
    delCheck(row) {
      this.$api.deleteLiveChannels(row).then(res => {
        if (!res.error) {
          this.getall()
          this.$Message.success(res.message)
        } else {
          this.$Message.error(res.message, 4)
        }
      }, err => {
        this.$Message.error(res.message, 4)
      })
    },
    render(item) {
      return item.label;
    },
    handleChange(newTargetKeys, direction, moveKeys) {
      console.log(newTargetKeys);
      console.log(direction);
      console.log(moveKeys);
      this.targetKeys = newTargetKeys;
    }

  },
  mounted() {
    let self = this
    self.getall()
    self.getUser()
  }
}
</script>
